/*
 * @author: Victor
 * @Date: 2021-12-31 14:59:28
 * @LastEditTime: 2022-01-03 09:05:53
 */
// var that;
class Tab {
  constructor(selector) {
    // 获取元素
    this.main = document.querySelector(selector);
    this.lis = this.main.getElementsByTagName('li');
    this.cons = this.main.getElementsByTagName('section');
    this.rmBtns = this.main.getElementsByClassName('icon-guanbi');
    this.spans = this.main.getElementsByClassName('text');
    this.ul = this.main.querySelector('ul');
    this.consBox = this.main.querySelector('.tabscon');
    this.addBtn = this.main.querySelector('.tabadd span');
    // that = this;
    // 事件注册
    this.init();
  }
  init() {
    // 循环注册事件
    for (var i = 0; i < this.lis.length; i++) {
      this.lis[i].index = i;
      this.lis[i].onclick = this.toggle.bind(this.lis[i], this);
      this.rmBtns[i].onclick = this.del.bind(this.rmBtns[i], this);
      this.spans[i].ondblclick = this.edit;
      this.cons[i].ondblclick = this.edit;
    }
    // 注册添加btn事件
    this.addBtn.onclick = this.add.bind(this.addBtn, this);
  }
  clearClass() {
    // 所有li取消高亮,所有section隐藏
    for (var i = 0; i < this.lis.length; i++) {
      this.lis[i].className = '';
      this.cons[i].className = '';
    }
  }
  // 切换
  toggle(that) {
    that.clearClass();
    // 当前li高亮
    this.className = 'liactive';
    // 对应的section显示
    that.cons[this.index].className = 'conactive';
  }
  // 新增
  add(that) {
    // 定义li及section字符串
    var tmp = Math.random().toFixed(3);
    var li = `<li class="liactive">
      <span class="text">新li${tmp}</span><span class="iconfont icon-guanbi"></span>
    </li>`;
    var section = `<section class="conactive">${tmp}</section>`;
    that.clearClass();
    // 将li及section添加到ul及conbox中
    that.ul.insertAdjacentHTML('beforeend', li);
    that.consBox.insertAdjacentHTML('beforeend', section);
    // 重新注册事件
    that.init();
  }
  // 删除
  del(that, e) {
    e.stopPropagation();
    // 获取当前li的索引
    var index = this.parentNode.index;
    // 删除当前li
    this.parentNode.remove();
    // 删除对应的section
    that.cons[index].remove();
    // 重新注册事件
    that.init();
    // 删除完后若还存在高亮的li则直接结束
    if (document.querySelector('.liactive')) return;
    // 若删除的是高亮的li
    if (index == 0 && that.lis.length > 0) {
      // 若删除的就是第一个,则触发新的第一个li的click事件
      that.lis[0].click();
    } else {
      // 如果存在上一个li则触发上一个li的click事件,让上一个li高亮并让对应的section显示
      that.lis[index - 1] && that.lis[index - 1].click();
    }
  }
  // 编辑
  edit() {
    // 阻止双击默认选中文字效果
    window.getSelection
      ? window.getSelection().removeAllRanges()
      : document.selection.empty();
    // 获取到span中原来的文字
    var txt = this.innerText;
    // 将span的内容替换成input
    this.innerHTML = '<input type="text" />';
    // 让input的内容为原来的文字,且处于选中状态
    var inp = this.children[0];
    inp.value = txt;
    inp.select();
    // input失去焦点时(编辑结束)，将Input中最新的值赋值给span
    inp.onblur = function () {
      this.parentNode.innerHTML = this.value;
    };
    // 在input中输入完成按下enter键也实现完成编辑功能
    inp.onkeyup = function (e) {
      if (e.keyCode == 13) {
        this.blur();
      }
    };
  }
}
new Tab('#tab');
new Tab('#tab1');
